function demo1() {
    var views = [
        [7057, 7483, 3749, 3846, 4598],
        [2371, 7397, 4589, 2861, 8249],
        [5972, 5672, 9152, 9725, 8983],];
    var width = 1000, height = 1000;
    var colors = ["blue", "yellow", "green", "red", "maroon"];
    var week = 0;
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .selectAll("g")
        .data(views[week])
        .enter();
    var g = svg.append("g")
        .attr("transform", t1);
    g.append("circle").attr("r", function (d) {
        return d / 100
    }).style("fill", function (d, i) {
        return colors[i];
    });
    g.append("text").attr("x", -10).attr("fill", "grey").text(function (d) {
        return d
    });
    /**
     * 坐标点
     * @param d
     * @param i
     * @returns {string}
     */
    function t1(d, i) {
        var x = 0;
        for (var count = 0; count < i; count++)
            x += views[week][count];
        for (var count = 0; count <= i; count++)
            x += views[week][count];
        return "translate(" + x / 100 + "," + height / 7 + ")"
    }

    /**
     * 坐标点2
     * @param d
     * @param i
     * @returns {string}
     */
    function t2(d, i) {
        var x = 10000, y = 10000;
        if (!(i % 2)) {
            for (var count = 0; count < i; count++)
                x += views[week][count];
            for (var count = 0; count <= i; count++)
                y += views[week][count];
        } else {
            for (var count = 0; count < i; count++)
                y += views[week][count];
            for (var count = 0; count <= i; count++)
                x += views[week][count];
        }
        return "translate(" + x / scale + "," + y / scale + ")";
    }

}
function demo2() {
//同时包含查看数据和互动数据。
    var viewsAndInteraction
        = [[[7057, 2052], [7483, 2089], [3749, 1586], [3846, 1426], [4598, 2632]], [[5972,
        2071], [5672, 2190], [9152, 7214], [9725, 3782], [8983, 2721]], [[8749, 3076], [4768,
        3190], [6738, 4532], [9546, 3825], [6983, 4831]]];
    var width = 1000, height = 1000;
    var viewColors = ["blue", "gold", "green", "red", "maroon"];
    var interactionColors = [
        "lightblue", "yellow", "lightgreen", "lightcoral", "indianred"];
    var week = 0, scale = 100;
    var svg = d3.select("body")
        .append("svg").attr("width", width).attr("height", height)
        .selectAll("g").data(viewsAndInteraction[week])
        .enter();
    var g = svg.append("g")
        .attr("transform", function (d, i) {
            var x = 10000, y = 10000;
            if (!(i % 2)) {
                for (var count = 0; count < i; count++) x += viewsAndInteraction[week][count][0];
                for (var count = 0; count <= i; count++) y += viewsAndInteraction[week][count][0];
            } else {
                for (var count = 0; count < i; count++) y += viewsAndInteraction[week][count][0];
                for (var count = 0; count <= i; count++)  x += viewsAndInteraction[week][count][0];
            }
            return "translate(" + x / scale + "," + y / scale + ")"
        });
    g.append("circle").attr("r", function (d) {
            return d[0] / scale
        }
    ).style("fill",
        function (d, i) {
            return viewColors[i];
        });
    g.append("circle").attr("r", function (d) {
        return d[1] / scale
    }).style("fill", function (d, i) {
        return interactionColors[i];
    });
    g.append("text")
        .attr("x", -15).attr("y", function (d) {
        return (15 + d[1] / scale);
    }).attr("fill", "white")
        .text(function (d) {
                return d[0]
            }
        );
    g.append("text").attr("x", -15).attr("y", 5)
        .text(function (d) {
            return d[1]
        });
}
function demo3() {
//导航数据
    var navigation = [[3057, 3483, 8749, 8465, 4598],
        [2371, 7397, 4589, 2861, 8249],
        [5972, 5672, 9152, 9725, 8983],
        [9763, 8462, 9782, 1953, 5182],
        [9567, 1571, 2895, 2783, 1874]];
//矩阵
    var navigationChord = d3.chord(navigation);
    var chordCalculations = navigationChord.chords;
    var colors = ["blue", "gold", "green", "red", "maroon"];
    var width = 500, height = 500, radius = 150, arcStroke = 40; //Step 2:
    var svg = d3.select("body").append("svg").attr("width", width).attr(
        "height", height) //Step 3:
        .append("g").attr("transform", function (d, i) {
            return "translate(" + width / 2 + "," + height / 2 + ")"
        }).datum(navigationChord);
//Step 4:
    svg.selectAll("path").data(function (chords) {
        return chords.groups;
    }).enter().append(
        "path").style("fill", function (d, i) {
        return colors[i];
    }).attr("d",
        d3.svg.arc().innerRadius(radius)
            .outerRadius(radius + arcStroke)); //Step 5:
    navigationChord.sortSubgroups(d3.ascending);
    svg.append("g").selectAll("path").data(chordCalculations).enter()
        .append("path").attr("d", d3.svg.chord().radius(radius)).style(
        "fill", function (d, i) {
            if (i < colors.length)
                return colors[i]
        }).style("opacity", function (d, i) {
        if (!(i < colors.length))
            return 0
    });
}
